<template>
    <!--<div id="app">
      <f-button
        icon="download"
        icon-position="left"
        :loading="loading1"
        @click="loading1 = !loading1"
        >按钮</f-button
      >
      <f-button
        icon="download"
        icon-position="right"
        :loading="loading2"
        @click="loading2 = !loading2"
        >按钮</f-button
      >

      <f-button-group>
        <f-button icon="left">上一页</f-button>
        <f-button>更多</f-button>
        <f-button icon="right" icon-position="right">下一页</f-button>
      </f-button-group>

      <f-icon name="left"></f-icon>

      <hr />

      <f-input value="ahhh" @change="inputChange"/>
      <f-input value="ahhh2" :disabled="true"/>
      <f-input value="ahhh3" disabled/>
      <f-input value="ahhh4" readonly/>
      <f-input value="ahhh5" error="姓名不能少于两个字"/>

      <f-row>
        <f-col :span="2">
          <f-row align="center"><div class="logo-wrapper"><img :src="imgSrc1" alt="" width="40"></div></f-row>
        </f-col>
        <f-col span="22">2</f-col>
      </f-row>

      <f-row>
        <f-col :span="24"
               :pad="{span:8}"
               :narrow-pc="{span:4}"
               :pc="{span:2}"
               :wide-pc="{span:1}"
        >1</f-col>
        <f-col span="24"
               :pad="{span:14,offset: 2}"
               :narrow-pc="{span:20}"
               :pc="{span:20,offset:2}"
               :wide-pc="{span:23}"
        >2</f-col>
      </f-row>

      &lt;!&ndash;如果不设置span，或则一个row中的span不满，gutter是有bug的&ndash;&gt;
      <f-row gutter="20">
        <f-col span="8">1</f-col>
        <f-col span="8">2</f-col>
        <f-col span="8">3</f-col>
      </f-row>

      <f-row>
        <f-col span="9">
          <f-row align="left">
            <f-col>1</f-col>
            <f-col>2</f-col>
            <f-col>3</f-col>
            <f-col>4</f-col>
          </f-row>
        </f-col>
        <f-col span="15">
          <f-row align="right">
            <f-col><img :src="imgSrc1" alt=""></f-col>
            <f-col>2</f-col>
            <f-col>3</f-col>
            <f-col>4</f-col>
            <f-col>5</f-col>
            <f-col>6</f-col>
            <f-col>7</f-col>
          </f-row>
        </f-col>
      </f-row>
    </div>-->

    <!-- layout测试 -->
    <!--<div id="app">
      &lt;!&ndash;<f-layout style="height:100vh;">
        <f-header class="demo"></f-header>
        <f-content class="demo"></f-content>
        <f-footer class="demo"></f-footer>
      </f-layout>&ndash;&gt;

      &lt;!&ndash;<f-layout style="height:100vh;">
        <f-header class="demo"></f-header>
        <f-layout>
          <f-sider class="demo">sider</f-sider>
          <f-content class="demo">content</f-content>
        </f-layout>
        <f-footer class="demo"></f-footer>
      </f-layout>&ndash;&gt;

      &lt;!&ndash;<f-layout style="height:100vh;">
        <f-header class="demo"></f-header>
        <f-layout>
          <f-content class="demo">content</f-content>
          &lt;!&ndash;放在后面&ndash;&gt;
          <f-sider class="demo">sider</f-sider>
        </f-layout>
        <f-footer class="demo"></f-footer>
      </f-layout>&ndash;&gt;

      <f-layout style="height:100vh;">
        <f-sider class="demo">sider</f-sider>
        <f-layout>
          <f-header class="demo">header</f-header>
          <f-content class="demo">content</f-content>
          <f-footer class="demo">footer</f-footer>
        </f-layout>
      </f-layout>
    </div>-->

    <div id="app">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
        <p>段落7</p>
        <p>段落8</p>
        <p>段落9</p>
        <p>段落10</p>
        <div style="margin:0 100px;">
            <f-sticky :distance="100">
                <div style="border:1px solid red;"><img src="./assets/logo.png" alt=""></div>
            </f-sticky>
        </div>

        <f-button icon="settings" icon-position="left">按钮</f-button>
        <button @click="showToast">toast按钮</button>

        <f-tabs :selected.sync="selectTab" :direction="direction"> <!-- @update:selected="selectTab=$event" -->
            <f-tabs-head>
                <template slot="actions">
                    <button>设置</button>
                </template>
                <f-tabs-item name="woman" disabled>
                    <f-icon name="settings"></f-icon>
                    美女
                </f-tabs-item>
                <f-tabs-item name="finance">财经</f-tabs-item>
                <f-tabs-item name="sports">体育</f-tabs-item>
            </f-tabs-head>
            <f-tabs-body>
                <f-tabs-pane name="woman">美女相关资讯</f-tabs-pane>
                <f-tabs-pane name="finance">财经相关资讯</f-tabs-pane>
                <f-tabs-pane name="sports">体育相关资讯</f-tabs-pane>
            </f-tabs-body>
        </f-tabs>

        <div style="overflow:hidden;border:1px solid green;padding:5px;" @click="yyy">
            <f-popover position="bottom">
                <template slot="content" slot-scope="{close}">
                    <!--<div>popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容</div>-->
                    <div>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    </div>
                    <button @click="close">关闭</button>
                </template>
                <button>点我</button>
            </f-popover>

            <f-popover position="top">
                <template slot="content">
                    <div>
                        popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容
                    </div>
                </template>
                <button>点我</button>
            </f-popover>

            <f-popover position="left">
                <template slot="content">
                    <div>
                        popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容
                    </div>
                </template>
                <button>点我</button>
            </f-popover>

            <f-popover position="right" trigger="hover">
                <template slot="content">
                    <div>
                        popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容popover内容
                    </div>
                </template>
                <button>点我</button>
            </f-popover>
        </div>

        <f-collapse :selected.sync="selectedArray" :single="true">
            <f-collapse-item title="标题1" name="1">内容1</f-collapse-item>
            <f-collapse-item title="标题2" name="2">内容2</f-collapse-item>
            <f-collapse-item title="标题3" name="3">内容3</f-collapse-item>
        </f-collapse>
        {{selectedArray}}

        <!--<f-cascader :source="source" popoverHeight="200px" :selected="selectedCity" @update:selected="selectedCity=$event"></f-cascader>-->
        <!--<f-cascader :source="source" popoverHeight="200px" :selected.sync="selectedCity" @update:selected="xxx"></f-cascader>-->
        <f-cascader :source.sync="source" popoverHeight="200px" :selected.sync="selectedCity" :load-data="loadData"></f-cascader>
        <!--<f-cascader :source.sync="source" popoverHeight="200px" :selected.sync="selectedCity"></f-cascader>-->
        {{selectedCity}}

        <hr>
        <f-slides :selected.sync="selectedFrame" :auto-play="true" class="slides-wrapper">
            <f-slides-item name="a">
                <div class="box">1</div>
            </f-slides-item>
            <f-slides-item name="b">
                <div class="box">2</div>
            </f-slides-item>
            <f-slides-item name="c">
                <div class="box">3</div>
            </f-slides-item>
        </f-slides>
        {{this.selectedFrame}}

        <hr>
        <f-nav :selected.sync="selectedNav1" @update:selected="onChange">
            <f-nav-item name="home">首页</f-nav-item>
            <f-sub-nav name="about">
                <template slot="title">关于</template>
                <f-nav-item name="culture">企业文化</f-nav-item>
                <f-nav-item name="developers">开发团队</f-nav-item>
                <f-sub-nav name="contacts">
                    <template slot="title">联系方式</template>
                    <f-nav-item name="wechat">微信</f-nav-item>
                    <f-nav-item name="qq">QQ</f-nav-item>
                    <f-sub-nav name="phone">
                        <template slot="title">手机</template>
                        <f-nav-item name="cm">移动</f-nav-item>
                        <f-nav-item name="cu">联通</f-nav-item>
                        <f-nav-item name="cn">电信</f-nav-item>
                    </f-sub-nav>
                </f-sub-nav>
            </f-sub-nav>
            <f-nav-item name="hire">招聘</f-nav-item>
        </f-nav>
        <f-nav :selected.sync="selectedNav2" vertical style="width:200px;margin:20px;margin-top:200px;">
            <f-nav-item name="home">首页</f-nav-item>
            <f-sub-nav name="about">
                <template slot="title">关于</template>
                <f-nav-item name="culture">企业文化</f-nav-item>
                <f-nav-item name="developers">开发团队</f-nav-item>
                <f-sub-nav name="contacts">
                    <template slot="title">联系方式</template>
                    <f-nav-item name="wechat">微信</f-nav-item>
                    <f-nav-item name="qq">QQ</f-nav-item>
                    <f-sub-nav name="phone">
                        <template slot="title">手机</template>
                        <f-nav-item name="cm">移动</f-nav-item>
                        <f-nav-item name="cu">联通</f-nav-item>
                        <f-nav-item name="cn">电信</f-nav-item>
                    </f-sub-nav>
                </f-sub-nav>
            </f-sub-nav>
            <f-nav-item name="hire">招聘</f-nav-item>
        </f-nav>


        <hr>
        {{selectedTableItem}}
        <!--<div style="margin:8px;">
            <f-table :columns="columns" :data-source="dataSource" bordered compact :selected-items.sync="selectedTableItem" :order-by.sync="orderBy" @update:orderBy="updateOrderBy" :loading="tableLoading" :height="400" expend-field="description" checkable>
                <template slot-scope="xxx">
                    <button @click="edit(xxx.item)">编辑</button>
                    <button @click="view(xxx.item)">查看</button>
                </template>
            </f-table>
            <f-pager :total-page="20" :current-page.sync="currentPage" hide-if-one-page></f-pager>
        </div>-->
        <div style="margin:8px;">
            <f-table :columns="columns" :data-source="dataSource" bordered compact :selected-items.sync="selectedTableItem" :order-by.sync="orderBy" @update:orderBy="updateOrderBy" :loading="tableLoading" :height="400" expend-field="description" checkable>
                <f-table-column text="姓名" field="name" :width="100">
                    <template slot-scope="props">
                        <a href="#">{{props.value}}</a>
                    </template>
                </f-table-column>
                <f-table-column text="分数" field="score"></f-table-column>
            </f-table>
            <f-pager :total-page="20" :current-page.sync="currentPage" hide-if-one-page></f-pager>
        </div>


        <hr>
        <div>只能上传 300kb 以内的 png、jpeg文件</div>
        <f-uploader accept="image/*" action="http://localhost:3000/upload" name="file" :fileList.sync="fileList" method="POST" :parse-response="parseResponse">
            <f-button icon="upload">上传</f-button>
        </f-uploader>
        <button>保存</button>

        <f-scroll style="width:300px;height:400px;">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
            <p>10</p>
            <p>11</p>
            <p>12</p>
            <p>13</p>
            <p>14</p>
            <p>15</p>
            <p>16</p>
            <p>17</p>
            <p>18</p>
            <p>19</p>
            <p>20</p>
            <p>21</p>
            <p>22</p>
            <p>23</p>
            <p>24</p>
            <p>25</p>
            <p>26</p>
            <p>27</p>
            <p>28</p>
            <p>29</p>
            <p>30</p>
            <p>31</p>
            <p>32</p>
            <p>33</p>
            <p>34</p>
            <p>35</p>
            <p>36</p>
            <p>37</p>
            <p>38</p>
            <p>39</p>
            <p>40</p>
            <p>41</p>
            <p>42</p>
            <p>43</p>
            <p>44</p>
            <p>45</p>
            <p>46</p>
            <p>47</p>
            <p>48</p>
            <p>49</p>
            <p>50</p>
            <p>51</p>
            <p>52</p>
            <p>53</p>
            <p>54</p>
            <p>55</p>
            <p>56</p>
            <p>57</p>
            <p>58</p>
            <p>59</p>
            <p>60</p>
            <p>61</p>
            <p>62</p>
            <p>63</p>
            <p>64</p>
            <p>65</p>
            <p>66</p>
            <p>67</p>
            <p>68</p>
            <p>69</p>
            <p>70</p>
            <p>71</p>
            <p>72</p>
            <p>73</p>
            <p>74</p>
            <p>75</p>
            <p>76</p>
            <p>77</p>
            <p>78</p>
            <p>79</p>
            <p>80</p>
            <p>81</p>
            <p>82</p>
            <p>83</p>
            <p>84</p>
            <p>85</p>
            <p>86</p>
            <p>87</p>
            <p>88</p>
            <p>89</p>
            <p>90</p>
            <p>91</p>
            <p>92</p>
            <p>93</p>
            <p>94</p>
            <p>95</p>
            <p>96</p>
            <p>97</p>
            <p>98</p>
            <p>99</p>
            <p>100</p>
        </f-scroll>
    </div>
</template>

<script>
  import imgSrc1 from './assets/logo.png';
  import FButton from "./components/button";
  import FIcon from "./components/icon";
  import FButtonGroup from "./components/button-group";
  import FInput from "./components/input";
  import FRow from "./components/row";
  import FCol from "./components/col";
  import FLayout from "./components/layout";
  import FHeader from "./components/header";
  import FSider from "./components/sider";
  import FContent from "./components/content";
  import FFooter from "./components/footer";
  import FToast from "./components/toast";
  import FTabs from "./components/tabs";
  import FTabsHead from "./components/tabs-head";
  import FTabsBody from "./components/tabs-body";
  import FTabsPane from "./components/tabs-pane";
  import FTabsItem from "./components/tabs-item";
  import FPopover from "./components/popover";
  import FCollapse from "./components/collapse";
  import FCollapseItem from "./components/collapse-item";
  import FCascader from "./components/cascader";
  import FSlides from "./components/slides";
  import FSlidesItem from "./components/slides-item";
  import FNav from "./nav/nav";
  import FNavItem from "./nav/nav-item";
  import FSubNav from "./nav/sub-nav";
  import FPager from "./pager";
  import FTable from "./table";
  import FUploader from "./uploader";
  import FSticky from "./sticky";
  import FTableColumn from "./table-column";
  import FScroll from "./scroll";

  import db from '../tests/fixtures/db';

  import {removeListener} from "./components/click-outside";

  function ajax(pid = 0, success, fail) {
    let id = setTimeout(() => {
      let result = db.filter((item) => item.parent_id === pid);
      success(result);
    }, 3000);
    return id;
  }

  function ajax2(pid = 0) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let result = db.filter((item) => item.parent_id === pid);
        result.forEach(node => {
          node.isLeaf = db.filter(item => item.parent_id === node.id).length <= 0;
        });
        resolve(result);
      }, 300);
    });
  }

  // console.log(ajax());

  let array = [
    {id: 1, name: '方方', score: 100, description: 'xxx xxx'}
    , {id: 2, name: '圆圆', score: 99, description: 'yyy yyy'}
    , {id: 3, name: '张三', score: 99}
    , {id: 4, name: '李四', score: 99}
    , {id: 5, name: '超人', score: 99}
    , {id: 6, name: '蝙蝠侠', score: 99}
    , {id: 7, name: '蜘蛛侠', score: 99}
    , {id: 8, name: '钢铁侠', score: 99}
    , {id: 9, name: '钢铁侠', score: 99}
    , {id: 10, name: '钢铁侠', score: 99}
    , {id: 11, name: '钢铁侠', score: 99}
    , {id: 12, name: '钢铁侠', score: 99}
    , {id: 13, name: '钢铁侠', score: 99}
    , {id: 14, name: '钢铁侠', score: 99}
    , {id: 15, name: '钢铁侠', score: 99}
    , {id: 16, name: '钢铁侠', score: 99}
    , {id: 17, name: '钢铁侠', score: 99}
    , {id: 18, name: '钢铁侠', score: 99}
    , {id: 19, name: '钢铁侠', score: 99}
    , {id: 20, name: '钢铁侠', score: 99}
  ];
  let bigArray = [];
  for(let i=0;i<500;++i) {
    bigArray.push(...array.map((item, index) => ({...item, id: i * 20 + index})));
  }
  console.log(bigArray);

  export default {
    name: "app",
    components: {
      FButton,
      FIcon,
      FButtonGroup,
      FInput,
      FRow,
      FCol,
      FLayout,
      FHeader,
      FSider,
      FContent,
      FFooter,
      FToast,
      FTabs,
      FTabsHead,
      FTabsBody,
      FTabsPane,
      FTabsItem,
      FPopover,
      FCollapse,
      FCollapseItem,
      FCascader,
      FSlides,
      FSlidesItem,
      FNav,
      FNavItem,
      FSubNav,
      FPager,
      FTable,
      FUploader,
      FSticky,
      FTableColumn,
      FScroll,
    },
    data() {
      return {
        loading1: false,
        loading2: false,
        imgSrc1,
        selectTab: 'sports',
        direction: 'horizontal',
        selectedArray: ['2'],
        selectedCity: [],
        selectedFrame:'c',
        selectedNav1:[],
        selectedNav2:[],
        currentPage:1,
        columns:[
          {text:'#',field:'id',width:25}
          ,{text:'姓名',field:'name',width:100}
          ,{text:'分数',field:'score',width:400}
        ],
        orderBy:{ // true 开启排序 但不确定是asc desc
          name:true
          ,score:'desc'
        },
        dataSource:[
          {id:1,name:'方方',score:100,description:'xxx xxx'}
          ,{id:2,name:'圆圆',score:99,description:'yyy yyy'}
          ,{id:3,name:'张三',score:99}
          ,{id:4,name:'李四',score:99}
          ,{id:5,name:'超人',score:99}
          ,{id:6,name:'蝙蝠侠',score:99}
          ,{id:7,name:'蜘蛛侠',score:99}
          ,{id:8,name:'钢铁侠',score:99}
          ,{id:9,name:'钢铁侠',score:99}
          ,{id:10,name:'钢铁侠',score:99}
          ,{id:11,name:'钢铁侠',score:99}
          ,{id:12,name:'钢铁侠',score:99}
          ,{id:13,name:'钢铁侠',score:99}
          ,{id:14,name:'钢铁侠',score:99}
          ,{id:15,name:'钢铁侠',score:99}
          ,{id:16,name:'钢铁侠',score:99}
          ,{id:17,name:'钢铁侠',score:99}
          ,{id:18,name:'钢铁侠',score:99}
          ,{id:19,name:'钢铁侠',score:99}
          ,{id:20,name:'钢铁侠',score:99}
        ],
        selectedTableItem:[],
        tableLoading:false,
        fileList:[],
        source: []
        //非动态↓
        // source:[{
        //   name:'浙江'
        //   ,children:[
        //     {name:'杭州'
        //       ,children:[
        //         {name:'上城'}
        //         ,{name:'下城'}
        //         ,{name:'江干'}
        //       ]
        //     }
        //     ,{name:'嘉兴'
        //       ,children:[
        //         {name:'南湖'}
        //         ,{name:'秀洲'}
        //         ,{name:'嘉善'}
        //       ]
        //     }
        //     ,{name:'湖州'}
        //   ]
        // },{
        //   name:'福建'
        //   ,children:[
        //     {name:'福州'
        //       ,children:[
        //         {name:'鼓楼'}
        //         ,{name:'台江'}
        //         ,{name:'仓山'}
        //       ]
        //     }
        //     ,{name:'厦门'}
        //     ,{name:'莆田'}
        //     ,{name:'三明'}
        //     ,{name:'泉州'}
        //   ]
        // }]
      };
    }
    ,watch:{
      selectedNav1(newValue){
        console.log(newValue);
      }
    }
    , created() {
      //↓级联
      //动态需要加上
      /*ajax(0, (result) => {
        this.source = result;
      });*/
      ajax2(0).then((result) => {
        this.source = result;
      });

    }
    ,destroyed() {
      removeListener()
    }
    , methods: {
      parseResponse(response){
        let object = JSON.parse(response)
        let url = `http://127.0.0.1:3000/preview/${object.id}`;
        return url;
      },
      inputChange(e) {
        console.log(e.target.value)
      }
      ,onChange(selected){
        if(selected.indexOf('home')>=0){
          alert('hi')
        }
      }

      , yyy() {
        console.log('yyy')
      }

      , showToast() {
        /*this.$toast('<p><strong>hi</strong><a href="http://www.baidu.com">baidu</a></p>', {
          closeButton: {
            text: '知道了'
            , callback(toast) {
              console.log('用户说他知道了');
              toast.log();
            }
          }
          , enabledHtml: false
        });*/

        this.$toast(`${Math.random()}很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字很多很多字`, {
          closeButton: {
            text: '知道了'
            , callback(toast) {
              console.log('用户说他知道了');
              toast.log();
            }
          }
          , enabledHtml: false
          , position: 'bottom'
        });
      }

      , loadData(node, callback) {
        let {name, id, parent_id} = node;
        ajax2(id).then(result => {
          if (result.length > 0) callback(result); //this.$emit('update:source', copy);
        });
      }

      //用户自己写载入逻辑
      //点击请求北京
      , xxx() {
        ajax2(this.selectedCity[0].id).then(result => {
          let lastLevelSelected = this.source.filter(item => item.id === this.selectedCity[0].id)[0];
          lastLevelSelected.children = result;
          this.$set(lastLevelSelected, 'children', result);
        });
      }

      ,updateOrderBy(){
        this.tableLoading = true;
        setTimeout(() => {
          this.dataSource = this.dataSource.sort((a, b) => a.score - b.score);
          this.tableLoading = false;
        }, 3000);
        /*ajax(url,orderBy) //  /api/users?score='desc'
          .then((res)=>{
            this.dataSource = res.data;
          })*/
      }
      ,edit(item){
        alert(`开始编辑${item.id}`)
      }
      ,view(item){
        alert(`开始查看${item.id}`);
      }
    }

  };
</script>

<style lang="scss">
    .demo {
        background: #ddd;
        /*border:1px solid #666;*/
        min-height: 100px;
    }
    .sider {
        background: #333;
        width: 200px;
    }
    .header {
        background: #999999;
        height: 100px;
    }
    .footer {
        background: #cccccc;
        height: 50px;
    }
    .box{
        /*width: 200px;*/
        width: 100%;
        height: 150px;
        background: #ddd;
        border:1px solid red;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }
    .slides-wrapper{
        margin:40px;
    }
</style>
